<template>
  <div class="containerBox">
    <el-tabs v-model="activeName1" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabsData1" :label="item.label" :name="item.firstName" :key="item.id">
        <ul class="myThead">
          <li>二级分类</li>
          <li>排序</li>
          <li>三级分类</li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <el-tabs :tab-position="tabPosition" v-model="activeName2" type="border-card" class="tab2" @tab-click="handleClick">
      <el-tab-pane  v-for="item in tabsData2" :label="item.label" :name="item.firstName" :key="item.id" class="tableList">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column property="sort"></el-table-column>
          <el-table-column property="thirdClass"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'goosdClassify',
  data () {
    return {
      activeName1: 'DOG',
      activeName2: 'ZHULIANG',
      tabPosition: 'left',
      tableData: [
        {
          sort: 1,
          thirdClass: '进口主粮'
        }, {
          sort: 2,
          thirdClass: '国产主粮'
        }
      ],
      tabsData1: [
        {
          firstName: 'DOG',
          label: '狗',
          id: 11
        }, {
          firstName: 'CUT',
          label: '猫',
          id: 12
        }, {
          firstName: 'SHUIZU',
          label: '水族',
          id: 13
        }, {
          firstName: 'XIAOCHONG',
          label: '小宠',
          id: 15
        }, {
          firstName: 'FEIQING',
          label: '飞禽',
          id: 16
        }, {
          firstName: 'PAXING',
          label: '爬行',
          id: 17
        }
      ],
      tabsData2: [
        {
          firstName: 'ZHULIANG',
          label: '主粮',
          id: 12
        }, {
          firstName: 'LINGSHI',
          label: '零食',
          id: 13
        }, {
          firstName: 'WANJU',
          label: '玩具',
          id: 15
        }
      ]
    }
  },
  methods: {
    handleClick () {
      console.log(this.activeName1)
    },
    operation (type) {
      if (type === 'modify') {
        this.$message({
          type: 'info',
          message: '修改'
        })
      } else if (type === 'delete') {
        this.$message({
          type: 'info',
          message: '删除'
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox{
    /deep/ thead{
     display:none;
    }
    /deep/ .el-tabs--border-card{
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }
    /deep/ .el-tabs {
      border:none;
      background: #fff;
      .el-tabs__header .is-top .is-top {
        width:100%;
        height:60px;
        .el-tabs__item {
          width:17%;
          text-align: center;
          line-height:60px;
          background: #fff;
        }
        .is-active{
          background: #6f6f6f;
          color:#fff;
        }
      }
      /deep/ .el-tabs--border-card>.el-tabs__content{
        padding:15px 0;
      }
       .is-scrollable{
        padding:0 !important;
      }
      /deep/ .el-tabs__nav-prev, .el-tabs__nav-next{
        display:none;
      }
      .el-tabs__header.is-left{
        background: #bbbbbb;
        width:33%;
        margin-right:0;
        .el-tabs__item{
          text-align: center;
          color:#fff;
          line-height:55px;
          height:55px;
          border-left:5px solid #bbbbbb;
        }
        .is-active{
          background: #6f6f6f;
          border-left-color:#008fff;
        }
      }

    }
    /deep/ .el-tabs__nav-prev{
      width:0;
      padding:0;
      margin:0;
    }
    ul.myThead{
      li{
        width: 33%;
        text-align: center;
      }
    }
    .tab2{
      margin-top:20px;
      /deep/ .el-tabs__content{
        padding:0;
      }
    }
    .tableList{
      padding:0;
      /deep/ .el-table .cell{
        color:#000;
        font-weight: normal;
        text-align:center;
        line-height:31px;
      }
      /deep/ .el-table th.is-leaf{
        padding:0 0 14px 0;
      }
      /deep/ .el-table__body-wrapper tbody tr *{
        font-size:15px;
      }
      /deep/ .el-table__body-wrapper tbody tr td .cell .tagS{
        border:1px solid #c7c7c7;
        padding: 5px;
        margin-bottom: 5px;
        margin-right:5px;
      }
      /deep/ .el-table__body-wrapper tbody tr td .cell a.oper{
        color: #008fff;
      }
      .el-pagination{
        margin-top: 40px;
        text-align: center;
      }
      .pagination /deep/ *{
        font-size: 16px;
      }
    }
  }
</style>
